<template>
  <div class="buy">
    <!-- 头部 -->
    <div>
      <div style="padding:15px 0 0 15px" class="flex">
        <span class="name ellipsis">{{name}}</span>
      </div>

      <!-- <img src="/static/images/manage/detailBg.png" class="detailBg" alt /> -->
      <div class="detailBg">
        <p class="standard">业绩比较基准</p>
        <p class="percent">{{baseComparison}}</p>
      </div>
      <!-- /**基本信息 */ -->
      <div class="info">
        <div class="flex" style="margin-top:20px">
          <p class="infoLeft">客户姓名</p>
          <p class="flex-1 infoRight">{{customerName}}</p>
        </div>
        <div class="flex" style="margin-top:20px">
          <p class="infoLeft">手机号</p>
          <p class="flex-1 infoRight">{{phone}}</p>
        </div>
      </div>
      <div class="gray"></div>
      <div style="padding:0 15px;">
        <div class="flex" style="padding-top:20px">
          <p class="infoLeft">预约金额（万元）</p>
          <input
            class="flex-1"
            v-model="FormData.purchaseAmount"
            style="text-align:right"
            type="text"
            placeholder="请输入预约金额"
            placeholder-style="color:#b8bab9"
          />
        </div>
        <div class="flex" style="padding-top:20px">
          <p class="infoLeft">开户行</p>
          <div class="flex align-center flex-1" style="justify-content: flex-end;">
            <input
              class="flex-1"
              v-model="FormData.bankDeposit"
              style="text-align:right"
              type="text"
              placeholder="请填写"
              placeholder-style="color:#b8bab9"
            />
            <!-- <picker
              @change="bindPickerChange"
              style="width: 100%;text-align: right;"
              :value="index"
              :range="array"
            >
              <span class="picVal">{{typeVal?'请选择':array[index]}}</span>
              <img src="/static/images/manage/right.png" style="width:10px;height:14px" alt />
            </picker>-->
          </div>
        </div>
        <div class="flex" style="padding-top:20px">
          <p class="infoLeft flex-1">账户名</p>
          <input
            class="flex-1"
            v-model="FormData.bankCardName"
            style="text-align:right"
            type="text"
            placeholder="请填写"
            placeholder-style="color:#b8bab9"
          />
        </div>
        <div class="flex" style="padding:20px 0;border-bottom:0.5px solid #E6E6E6">
          <p class="infoLeft flex-1">卡号</p>
          <input
            v-model="FormData.bankCard"
            class="flex-1"
            style="text-align:right"
            type="text"
            placeholder="请填写"
            placeholder-style="color:#b8bab9"
          />
        </div>
      </div>
      <div style class="flex optional align-center">
        <p style="font-size:14px;color:#020604">银行卡照片(选填)</p>
        <div class="flex-1" style="text-align:right">
          <div class="flex-1 flex" style="flex-wrap:wrap;justify-content: flex-end;">
            <div v-for="(item,index ) in imgList" :key="index" class="listImg">
              <img style="width:60px;height:60px" :src="item" alt />
              <img
                src="/static/images/user/delect_icon.png"
                @click="deleteImg(index)"
                alt
                class="imgDelete"
              />
            </div>
            <img @click="imageItem" class="upImg" src="/static/images/user/upImg.png" alt />
          </div>
          <!-- <img class="upload" src="/static/images/manage/upload.png" alt /> -->
        </div>
      </div>
      <!-- /**底部 */ -->
      <div class="bottom flex">
        <div class="btn" @click="jump">提交</div>
      </div>
    </div>
  </div>
</template>
<script>
import { productPlanOrder, apiGetOssPlicy } from "@/api/api";
import uploadImage from "@/utils/upload";
export default {
  data() {
    return {
      typeVal: true,
      index: 0,
      // array: ['美国', '中国', '巴西', '日本'],
      financial: false,
      tel: "110",
      FormData: {},
      name: null,
      baseComparison: null,
      customerName: null,
      phone: null,
      sign: null,
      imgList: []
    };
  },
  mounted() {
    // 可以将当前状态的data重置为初始状态
    Object.assign(this.$data, this.$options.data());
    console.log(this.$mp.query, "ttttttttttt");
    this.name = this.$mp.query.name;
    this.baseComparison = this.$mp.query.baseComparison;
    this.customerName = this.$mp.query.customerName;
    this.phone = this.$mp.query.phone;
    this.FormData = {
      customerId: this.$mp.query.customerId,
      productId: this.$mp.query.productId
    };
    this.apiGetOssPlicy();
  },
  methods: {
    /** 获取oss凭证 */
    async apiGetOssPlicy() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      const data = await apiGetOssPlicy();
      wx.hideLoading();
      if (data) {
        this.sign = data;
      }
    },
    /** 删除图片 */
    deleteImg(index) {
      let that = this;
      wx.showModal({
        title: "提示",
        content: "确定删除这张照片吗？",
        confirmColor: "#1E7FFF",
        success(res) {
          if (res.confirm) {
            that.imgList.splice(index, 1);
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    /** 上传图片 */
    imageItem() {
      let that = this;
      if (this.sign != null) {
        wx.chooseImage({
          // count: 3 - that.clueLinkmanCard.length, // 最多选择几张图片
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            // 支持多图上传
            for (let i = 0; i < res.tempFilePaths.length; i++) {
              // 验证格式
              if (!/.(jpg|jpeg|png|gif)$/i.test(res.tempFilePaths[i])) {
                wx.showToast({
                  title: "图片格式必须是jpeg,jpg,png,gif中的一种",
                  icon: "none"
                });
                return;
              }
              // 显示消息提示框
              wx.showLoading({
                title: "图片上传中...",
                mask: true
              });
              console.log("that.sign", that.sign);
              that.sign &&
                uploadImage(
                  res.tempFilePaths[i],
                  that.sign,
                  function(result) {
                    console.log(result, "rrrrrrrrrr");
                    // 做你具体的业务逻辑操作
                    that.imgList.push(result);
                    console.log("imgList", that.imgList);
                    wx.hideLoading();
                  },
                  function(result) {
                    // 做你具体的业务逻辑操作
                    console.log("uploadfileerro", JSON.stringify(result));
                    wx.showToast({
                      title: "result" + JSON.stringify(result),
                      icon: "none",
                      duration: 6000
                    });
                    // wx.hideLoading();
                  }
                );
            }
          }
        });
      } else {
        this.apiGetOssPlicy();
      }
    },
    /** 提交 */
    async jump() {
      if (!this.FormData.purchaseAmount) {
        wx.showToast({
          title: "请输入预约金额",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      if (!this.FormData.bankDeposit) {
        wx.showToast({
          title: "请输入开户行",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      if (!this.FormData.bankCardName) {
        wx.showToast({
          title: "请输入账户名",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      if (!this.FormData.bankCard) {
        wx.showToast({
          title: "请输入卡号",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      this.FormData.attachment = this.imgList;
      wx.showModal({
        content: "是否确认",
        success: res => {
          // console.log('res:', res);
          if (res.confirm) {
            productPlanOrder(this.FormData).then(res => {
              if (!res.code) {
                wx.showToast({
                  title: "提交成功",
                  icon: "success",
                  duration: 2000
                });
                setTimeout(() => {
                  wx.navigateTo({
                    url: `/pages/PersonalCenter/userChildren/productDetail/main?id=${res}`
                  });
                }, 2000);
              }
            });
          }
          if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    bindPickerChange(e) {
      this.typeVal = false;
      console.log(e, "eeeee");
      this.index = e.mp.detail.value;
    }
  }
};
</script>
<style lang="less" scoped>
.buy {
  .upImg {
    width: 60px;
    height: 60px;
  }
  .listImg {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 0 9px 5px 0;
  }
  .imgDelete {
    width: 18px;
    height: 14px;
    position: absolute;
    right: 0px;
    top: 0;
  }
  .optional {
    padding: 21px 15px;
    border-bottom: 0.5px solid #e6e6e6;
    margin-bottom: 75px;
  }
  input {
    font-size: 14px;
    color: #b8bab9;
  }
  .picVal {
    font-size: 14px;
    color: #b8bab9;
    margin-right: 8px;
    vertical-align: top;
  }
  .upload {
    width: 60px;
    height: 60px;
  }

  .bottom {
    width: 100%;
    background: #fff;
    z-index: 3;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 54px;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e6e6e6;
    img {
      width: 19px;
      height: 19px;
    }
    .collect {
      font-size: 11px;
      color: #909292;
    }
    .btn {
      width: 287px;
      height: 42px;
      line-height: 42px;
      font-size: 15px;
      color: #fff;
      background: rgba(24, 119, 152, 1);
      border-radius: 2px;
    }
  }
  .gray {
    width: 375px;
    height: 10px;
    background: rgba(247, 247, 246, 1);
  }
  .info {
    padding: 0 15px 20px 15px;
  }
  .infoLeft {
    font-size: 14px;
    color: #020604;
  }
  .infoRight {
    text-align: right;
    font-size: 14px;
    color: #6b6b6b;
  }
  .detailBg {
    padding-left: 15px;
    background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/detailBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 108px;
    .percent {
      color: #f45247;
      font-size: 38px;
    }
    .grade {
      padding: 2px 10px;
      background: #fff;
      border-radius: 2px;
      border: 1px solid rgba(184, 186, 185, 1);
      font-size: 11px;
      color: #909292;
      margin-left: 10px;
    }
    .safe {
      padding: 2px 10px;
      color: #d4a45d;
      font-size: 12px;
      background: rgba(255, 250, 237, 1);
      border-radius: 2px;
      border: 0.5px solid rgba(212, 164, 93, 1);
      justify-content: center;
      align-items: center;
      img {
        width: 12px;
        margin-left: -3px;
        margin-right: 3px;
        height: 12px;
      }
    }
  }
  .standard {
    padding-top: 14px;
    opacity: 0.8;
    font-size: 12px;
    color: #909292;
  }
  .name {
    font-size: 15px;
    color: #020604;
    font-weight: bold;
  }
}
</style>